<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Dự án làng nghề thạch thất</title>
<!--Thư viện hiệu ứng animate-->
<link href="css/animate.min.css" rel="stylesheet" type="text/css">
<!--Thư viện icon font-awesome-->
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!--Reset css về mặc định trên các trình duyệt-->
<link href="css/normalize.css" rel="stylesheet" type="text/css"/>
<!--Css dùng chung -->
<link href="css/reset.css" rel="stylesheet" type="text/css"/>
<!-- Css cho supperslides -->
<link rel="stylesheet" type="text/css" href="css/superslides.css">
<!-- Css cho jcarousellite -->
<link rel="stylesheet" type="text/css" href="css/nqh-carousel.css">
<!--Css chính cho toàn trang -->
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--Jquery -->
<script src="js/jquery-1.11.1.js"></script>


</head>
<body>
<div id="fb-root"></div>
	<script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&appId=818469638219622&version=v2.0";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

<header class="itq-header"> 
	<section class="all">
    	<nav class="navigation">
        	<ul class="main">
            	<li class="main"> <a href="#" class="main">trang chủ</a></li>
                <li class="main"> <a href="#" class="main">giới thiệu</a>
                	
                	<ul class="child">
                    <section class="arrow"></section>
                    	<li class="child"><a href="#">làng mây tre đan</a></li>
                        <li class="child"><a href="#">làng lụa</a></li>
                        <li class="child"><a href="#">làng gốm</a></li>
                        <li class="child"><a href="#">làng trạm khắc</a></li>
                        <li class="child"><a href="#">làng mộc</a></li>
                    </ul>
                
                </li>
                <li class="main"> <a href="#" class="main"> sự kiện</a></li>
                <li class="main"> <a href="#" class="main">hội làng nghề</a>
                	
                </li>  
                <li class="main"> <a href="#" class="main">liên kết</a></li> 
                <li class="main"> <a href="#" class="main">Liên hệ</a></li> 
            </ul>
             <section class="seach">
        
                <form action="" method="get">
                    <input type="text" class="keyword" name="keyword" id="keyword" placeholder="Từ khóa tìm kiếm...">
                    <button type="submit" class="submit_seach" id="submit_seach"  >
                    <img src="images/seach.png" alt="">
                    </button>
                </form>
            </section><!--seach-->
  		 </nav>
     </section>  <!-- .all -->  
</header><!-- .itq-header -->
<section class="clear"></section>
  
<section class="itq-wrapper">  
  <section class="itq-slider">
    	<section class="wrapper">
			<header>
				<h3>Làng nghề truyền thống</h3>
				<p>Huyện Thạch Thất</p>
			</header>
        	<section id="slides">
				<section class="slides-container">
					<img src="uploads/slide-1.png" alt="">
					<img src="uploads/slide-1.png" alt="">
					<img src="uploads/slide-1.png" alt="">
					<img src="uploads/slide-1.png" alt="">
				</section>
				<!--<nav class="slides-navigation">
					<a href="#" class="next">Next</a>
					<a href="#" class="prev">Previous</a>
				</nav>-->
			</section>
			<section class="itq-maps-control">
				<a href="#" class="show"><img src="images/logo-maps.png"></a>
                <figure>
                	<img src="uploads/logo.png">
                </figure>
			</section>
			<section class="itq-details-maps">
				<a href="#" class="hidden">
					<img src="images/control.png" alt="">
				</a>
				
				<section class="itq-address">
					<form action="" method="">
						<ul class="ndt-list">
							<li class="list-village-1">
								<figure>
									<a href="#"><img src="images/lang-nghe-1.png" alt=""></a>
									<figcaption>
										<h3>Làng nghề Hương Ngãi</h3>
										<select>
											<option value="">Chi tiết</option>
											<option value="">Saab</option>
											<option value="">Mercedes</option>
											<option value="">Audi</option>
										</select>
									</figcaption>
								</figure>
							</li>
							<li class="list-village-2">
								<figure>
									<a href="#"><img src="images/lang-nghe-2.png" alt=""></a>
									<figcaption>
										<h3>Làng nghề Hương Ngãi</h3>
										<select>
											<option value="">Chi tiết</option>
											<option value="">Saab</option>
											<option value="">Mercedes</option>
											<option value="">Audi</option>
										</select>
									</figcaption>
								</figure>
							</li>
							<li class="list-village-3">
								<figure>
									<a href="#"><img src="images/lang-nghe-3.png" alt=""></a>
									<figcaption>
										<h3>Làng nghề Hương Ngãi</h3>
										<select>
											<option value="">Chi tiết</option>
											<option value="">Saab</option>
											<option value="">Mercedes</option>
											<option value="">Audi</option>
										</select>
									</figcaption>
								</figure>
							</li>
							<li class="list-village-4">
								<figure>
									<a href="#"><img src="images/lang-nghe-4.png" alt=""></a>
									<figcaption>
										<h3>Làng nghề Hương Ngãi</h3>
										<select>
											<option value="">Chi tiết</option>
											<option value="">Saab</option>
											<option value="">Mercedes</option>
											<option value="">Audi</option>
										</select>
									</figcaption>
								</figure>
							</li>
							<li class="list-village-5">
								<figure>
									<a href="#"><img src="images/lang-nghe-5.png" alt=""></a>
									<figcaption>
										<h3>Làng nghề Hương Ngãi</h3>
										<select>
											<option value="">Chi tiết</option>
											<option value="">Saab</option>
											<option value="">Mercedes</option>
											<option value="">Audi</option>
										</select>
									</figcaption>
								</figure>
							</li>
							<li class="list-village-6">
								<figure>
									<a href="#"><img src="images/lang-nghe-6.png" alt=""></a>
									<figcaption>
										<h3>Làng nghề Hương Ngãi</h3>
										<select>
											<option value="">Chi tiết</option>
											<option value="">Saab</option>
											<option value="">Mercedes</option>
											<option value="">Audi</option>
										</select>
									</figcaption>
								</figure>
							</li>
							<li class="list-village-7">
								<figure>
									<a href="#"><img src="images/lang-nghe-7.png" alt=""></a>
									<figcaption>
										<h3>Làng nghề Hương Ngãi</h3>
										<select>
											<option value="">Chi tiết</option>
											<option value="">Saab</option>
											<option value="">Mercedes</option>
											<option value="">Audi</option>
										</select>
									</figcaption>
								</figure>
							</li>
							
							<li class="list-village-8">
								<figure>
									<a href="#"><img src="images/lang-nghe-8.png" alt=""></a>
									<figcaption>
										<h3>Làng nghề Hương Ngãi</h3>
										<select>
											<option value="">Chi tiết</option>
											<option value="">Saab</option>
											<option value="">Mercedes</option>
											<option value="">Audi</option>
										</select>
									</figcaption>
								</figure>
							</li>
						</ul>
					</form>
				</section>
			</section><!-- .itq-details-maps-->
			
			<section class="itq-option-village">
				<form action="" method="">
					<ul class="ndt-list-option">
						<li class="ndt-list-option">
							<h3>
								<a href="#">Lựa chọn nghề</a>
							</h3>
							<ul class="ndt-option">
								<li class="ndt-option">
									<a href="#">Lựa chọn làng nghề</a>
								</li>
								<li class="ndt-option">
									<a href="#">Lựa chọn nghề</a>
								</li>
								<li class="ndt-option">
									<a href="#">Lựa chọn nghề</a>
								</li>
								<li class="ndt-option">
									<a href="#">Lựa chọn nghề</a>
								</li>
							</ul>
						</li>
						<li class="ndt-list-option">
							<h3>
								<a href="#">Lựa chọn nghề</a>
							</h3>
							<ul class="ndt-option">
								<li class="ndt-option">
									<a href="#">Lựa chọn nghề</a>
								</li>
								<li class="ndt-option">
									<a href="#">Lựa chọn nghề</a>
								</li>
								<li class="ndt-option">
									<a href="#">Lựa chọn nghề</a>
								</li>
								<li class="ndt-option">
									<a href="#">Lựa chọn nghề</a>
								</li>
							</ul>
						</li>
					</ul>
				</form>
			</section><!-- .itq-option-village-->
			
        </section>
		<section class="clear"></section>
    </section><!-- .itq-slider -->
  <section class="clear"></section>
  <section class="itq-container">
    <section class="itq-content">
      <section class="nqh-box-module">
		<section class="nqh-title-module">
			<ul>
				<li><h3><a href="">SẢN PHẨM NỔI BẬT</a></h3></li>
				<li><h3><a href="">QUẢNG BÁ DOANH NGHIỆP</a></h3></li>
				<li><h3><a href="">DỊCH VỤ VÀ HỖ TRỢ</a></h3></li>
			</ul>
		</section>
		<h3>SẢN PHẨM NỔI BẬT</h3>
        <section id="jcl-demo">
          <section class="custom-container nonCircular"> <a href="#" class="prev">&lsaquo;</a>
            <section class="nqh-carousel">
              <ul>
                <li>
                  <figure> <img src="uploads/contenth-slider1.png"/>
                    <figcaption>
                      <h4><a href="#">Tượng điêu khắc sư tử</a></h4>
                      <p>Làng nghề : Chàng Sơn</p>
                    </figcaption>
                  </figure>
                </li>
                <li>
                  <figure> <img src="uploads/contenth-slider1.png"/>
                    <figcaption>
                      <h4><a href="#">Tượng điêu khắc sư tử</a></h4>
                      <p>Làng nghề : Chàng Sơn</p>
                    </figcaption>
                  </figure>
                </li>
                <li>
                  <figure> <img src="uploads/contenth-slider1.png"/>
                    <figcaption>
                      <h4><a href="#">Tượng điêu khắc sư tử</a></h4>
                      <p>Làng nghề : Chàng Sơn</p>
                    </figcaption>
                  </figure>
                </li>
                <li>
                  <figure> <img src="uploads/contenth-slider1.png"/>
                    <figcaption>
                      <h4><a href="#">Tượng điêu khắc sư tử</a></h4>
                      <p>Làng nghề : Chàng Sơn</p>
                    </figcaption>
                  </figure>
                </li>
                <li>
                  <figure> <img src="uploads/contenth-slider1.png"/>
                    <figcaption>
                      <h4><a href="#">Tượng điêu khắc sư tử</a></h4>
                      <p>Làng nghề : Chàng Sơn</p>
                    </figcaption>
                  </figure>
                </li>
                <li>
                  <figure> <img src="uploads/contenth-slider1.png"/>
                    <figcaption>
                      <h4><a href="#">Tượng điêu khắc sư tử</a></h4>
                      <p>Làng nghề : Chàng Sơn</p>
                    </figcaption>
                  </figure>
                </li>
                <li>
                  <figure> <img src="uploads/contenth-slider1.png"/>
                    <figcaption>
                      <h4><a href="#">Tượng điêu khắc sư tử</a></h4>
                      <p>Làng nghề : Chàng Sơn</p>
                    </figcaption>
                  </figure>
                </li>
                <li>
                  <figure> <img src="uploads/contenth-slider1.png"/>
                    <figcaption>
                      <h4><a href="#">Tượng điêu khắc sư tử</a></h4>
                      <p>Làng nghề : Chàng Sơn</p>
                    </figcaption>
                  </figure>
                </li>
              </ul>
            </section><!--carousel--> 
            <a href="#" class="next">&rsaquo;</a>
            <section class="clear"></section>
          </section> <!--custom-container nonCircular--> 
          
        </section> <!-- jcl-demo --> 
      </section><!-- nqh-box-module -->
      <section class="nqh-box-module">
		<section class="nqh-title-module">
			<ul>
				<li><h3><a href="">THAM QUAN LÀNG NGHỀ</a></h3></li>
				<li><h3><a href="">LỊCH SỬ HÌNH THÀNH</a></h3></li>
				<li><h3><a href="">SỰ KIỆN</a></h3></li>
				<li><h3><a href="">SỰ KIỆN</a></h3></li>
				<li><h3><a href="">VĂN BẢN</a></h3></li>
				<li><h3><a href="">VIDEO</a></h3></li>
				<li><h3><a href="">HÌNH ẢNH</a></h3></li>
			</ul>
		</section>
		<section class="nqh-news-content">
			<section class="nqh-news-content-left">
				<h4><a>Làng nghề Thạch Thất được coi là quê hương của các sản phẩm đồ gốm ...</a></h4>
				<p>Làng mộc Chàng Sơn thuộc huyện Gia Lâm, phía Đông Nam Hà Nội, phía Bắc giáp với làng cổ Bát Chàng, phía Tây giáp với quận Hoàng Mai có lịch sử hình thành lâu đời và cũng là một trong những trung tâm gốm nổi tiếng của cả nước.</p>
				<p>Làng mộc Chàng Sơn thuộc huyện Gia Lâm, phía Đông Nam Hà Nội, phía Bắc giáp với làng cổ Bát Chàng, phía Tây giáp với quận Hoàng Mai có lịch sử hình thành lâu đời và cũng là một trong những trung tâm gốm nổi tiếng của cả nước.</p>
			</section>
			<section class="nqh-news-content-right">
				<h4>VIDEO GIỚI THIỆU</h4>
				<section class="nqh-youtube">
					<iframe width="269" height="199" src="//www.youtube.com/embed/i1NP05sFaq0" frameborder="0" allowfullscreen></iframe>
					<p><span>Làng nghề Thạch Thất</span> được coi là quê hương của các sản phẩm đồ gốm ...</p>
				</section>
			</section>
		</section>
	  </section>
    </section><!-- .itq-content-->
    <aside class="itq-sidebar">
          <section class="news">
              <header>
                  <h3>TIN TỨC NỔI BẬT</h3>
                  <h4>Làng nghề truyền thống huyện Thạch Thất</h4>
              </header>
              <ul>
                  <li>
                      <figure>
                          <img src="uploads/news-1.jpg" alt="">
                          <figcaption>
                              <p>Làng mộc Chàng Sơn được coi là quê hương của các sản phẩm đồ gốm </p>
                              <a href="#">Xem tiếp<img src="images/next.png" alt=""></a>
                          </figcaption>
                      </figure>
                  </li>
                  <li>
                      <figure>
                          <img src="uploads/news-2.jpg" alt="">
                          <figcaption>
                              <p>Làng mộc Chàng Sơn được coi là quê hương của các sản phẩm đồ gốm </p>
                              <a href="#">Xem tiếp<img src="images/next.png" alt=""></a>
                          </figcaption>
                      </figure>
                  </li>
              </ul>
          </section>
          <section class="fanpage">
              <header>
                  <h3>FANPAGE</h3>
                  <ul>
                      <li><a class="icon" href="#"><img src="images/g+.png" alt=""></a></li>
                      <li><a class="icon" href="#"><img src="images/tw.png" alt=""></a></li>
                      <li><a class="icon" href="#"><img src="images/ytb.png" alt=""></a></li>
                  </ul>
              </header>
              <section class="page">
                  <section class="fb-like-box" data-href="https://www.facebook.com/FacebookDevelopers" data-width="241px" data-height="250px" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></section>
              </section>
          </section>
      </aside><!-- .itq-sidebar -->
  </section>
  <!-- .itq-container-->
  <section class="clear"></section>
</section><!-- .itq-wrapper -->

   
<footer class="itq-footer">
	<section class="all">
      <!--Slider footer-->
      <section class="carousel">
          <ul>
              <li><a href="#"><img src="uploads/adv-1.png"></a></li>
              <li><a href="#"><img src="uploads/adv-2.png"></a></li>
              <li><a href="#"><img src="uploads/adv-3.png"></a></li>
              <li><a href="#"><img src="uploads/adv-1.png"></a></li>
              <li><a href="#"><img src="uploads/adv-2.png"></a></li>
              <li><a href="#"><img src="uploads/adv-3.png"></a></li>
              <li><a href="#"><img src="uploads/adv-1.png"></a></li>
              <li><a href="#"><img src="uploads/adv-2.png"></a></li>
              <li><a href="#"><img src="uploads/adv-3.png"></a></li>
              <li><a href="#"><img src="uploads/adv-1.png"></a></li>
              <li><a href="#"><img src="uploads/adv-2.png"></a></li>
              <li><a href="#"><img src="uploads/adv-3.png"></a></li>
              <li><a href="#"><img src="uploads/adv-1.png"></a></li>
              <li><a href="#"><img src="uploads/adv-2.png"></a></li>
              <li><a href="#"><img src="uploads/adv-3.png"></a></li>
              <li><a href="#"><img src="uploads/adv-1.png"></a></li>
              <li><a href="#"><img src="uploads/adv-2.png"></a></li>
              <li><a href="#"><img src="uploads/adv-3.png"></a></li>
              <li><a href="#"><img src="uploads/adv-1.png"></a></li>
              <li><a href="#"><img src="uploads/adv-2.png"></a></li>
              <li><a href="#"><img src="uploads/adv-3.png"></a></li>
              <li><a href="#"><img src="uploads/adv-1.png"></a></li>
              <li><a href="#"><img src="uploads/adv-2.png"></a></li>
              <li><a href="#"><img src="uploads/adv-3.png"></a></li>
          </ul>
      </section>
      
      <section class="bottom-footer">
          <section class="wrapper-footer">
              <section class="dev">
                  <p>Copyright 2014 by: Royaldesign.vn - Design & Developer by: <a href="#">ITQ.VN</a></p>
              </section>
              <nav>
                  <ul class="menu">
                      <li class="menu"><a href="#">TRANG CHỦ</a></li>
                      <li class="menu"><a href="#">GIỚI THIỆU</a></li>
                      <li class="menu"><a href="#">SỰ KIỆN</a></li>
                      <li class="menu"><a href="#">HỘI LÀNG NGHỀ</a></li>
                      <li class="menu"><a href="#">LIÊN KẾT</a></li>
                      <li class="menu"><a href="#">LIÊN HỆ</a></li>
                  </ul>
              </nav>
          </section><!--end .wrapper-footer-->
      </section><!--end .bottom-footer-->
   </section>  <!-- .all --> 
</footer><!-- .itq-footer -->
  <section class="clear"></section>

<!-- NDT - Thư viện supperslides --> 
<script src="js/jquery.jcarousellite.min.js"></script>
<script src="js/supperslide/jquery.easing.1.3.js"></script>
 
<!--<script src="js/supperslide/jquery.animate-enhanced.min.js"></script>--> 

<script src="js/supperslide/hammer.min.js"></script> 
<script src="js/supperslide/jquery.superslides.min.js"></script> 
<script src="js/jcarousellite_1.0.1.min.js" type="text/javascript"></script>
<script src="js/supperslide/jquery.easing.1.3.js"></script>
<script src="js/supperslide/jquery.animate-enhanced.min.js"></script>
<script src="js/supperslide/hammer.min.js"></script>
<script src="js/supperslide/jquery.superslides.min.js"></script>

<script>
	  $(document).ready(function(){
			$(".hidden").click(function(){
				$(".itq-details-maps").fadeOut();
			});
			$(".show").click(function(){
				$(".itq-details-maps").toggle('fast');
			});
			 $('ul.main li.main').hover(function(e) {
			  $(this).find('ul.child').fadeIn('fast')
			     },function(e) {
			  $(this).find('ul.child').fadeOut('fast')
			});
			$(".carousel").jCarouselLite({
				auto: 5000,
				speed: 500,
				visible: 10
			});
			$('.icon').hover(function(e) {
					 $(this).addClass('animated rubberBand');
				},function(e) {
					 $(this).removeClass('animated rubberBand');
				});
				
				
			$('ul.ndt-option').hide();
			  $("li.ndt-list-option").each(function(index){
				  if($(this).children().length > 1){
					  //$(this).css("background", "url(http://www.worldhypertensionleague.org/Images/SmallDownArrow.png) no-repeat right 15px");
				  }
			  });	
			$('.ndt-list-option > h3').click(function() {
				$(this).next().slideToggle('fast', function() {
					//set arrow depending on whether menu is shown or hidden
					if ($(this).is(':hidden')) {
						//$(this).parent().css("background", "url(http://www.worldhypertensionleague.org/Images/SmallDownArrow.png)no-repeat right 15px");
		
					} else {
						//$(this).parent().css("background", "url(http://www.logan.ws/images/small_up_arrow_icon.gif) no-repeat right 15px");
		
					}
					return false;
				});
		
			});	    
		
		});
		
		
		
	  $(function() {
		$('#slides').superslides({
			<!-- hashchange: true -->
			play:7000,
			pagination:true,
			hashchange:false,
			auto: true,
			inherit_width_from:'.itq-slider',
			inherit_height_from:'.itq-slider'
		});
	  });
	  $(function() {
            $(".nonCircular .nqh-carousel").jCarouselLite({
                btnNext: ".nonCircular .next",
                btnPrev: ".nonCircular .prev",
                circular: true
            });
        });

</script>
</body>
</html>